<script setup>
import { ref } from 'vue'
import router from "@/router";

const passwordVe = ref(1);
const phoneVe = ref(1);
const emailVe = ref(0);
</script>

<template>
  <h3>个人资料</h3>
  <hr>
  <div style="width: 90%;background-color: #f5f5f5;margin: 50px auto 20px;">
    <div style="overflow:hidden;position: relative">
      <img src="/imgs/safe-1.png" alt="" style="position: absolute;top: 50%;transform: translate(0, -50%);left: 50px;">
      <div style="margin: 20px 0 20px 170px;">
        <p style="font-weight: bold">安全等级：
          <span style="color: #0099d9">中</span>
        </p>
        <p style="color: #666;font-size: 14px">建议您启用全部安全设置，以保障账户安全</p>
        <p class="font-small">上次登录：IANA（IP地址：127.0.0.1） 2024/3/12 21:13:11
          <span>非本人登录？</span>
          <a href="/personal/changePassword" style="color: #0099d9">修改密码</a>
        </p>
      </div>
    </div>
  </div>
  <div style="width: 90%;margin: 0 auto ;">
    <!--登录密码-->
    <div class="box">
      <div v-if="passwordVe==1" class="left-box">
        <el-icon :size="20" color="#0099d9" class="icon"><Select /></el-icon>
        <span class="title">登录密码</span>
        <span class="font-small">为了保护您账户和资产的安全，请定期修改您的密码</span>
        <el-button type="danger" round size="small" plain class="right-button" @click="router.push('/personal/changePassword')">修改密码</el-button>
      </div>
      <div v-if="passwordVe==0" class="left-box">
        <el-icon style="color: indianred" :size="20" class="icon"><CloseBold /></el-icon>
        <span class="title">登录密码</span>
        <span class="font-small">密码未设置 为了保护您账户和资产的安全，请设置您的密码</span>
        <el-button type="danger" round size="small" plain class="right-button">设置密码</el-button>
      </div>
    </div>
    <!--手机验证-->
    <div class="box">
      <div v-if="phoneVe==1" class="left-box">
        <el-icon :size="20" color="#0099d9" class="icon"><Select /></el-icon>
        <span class="title">手机验证</span>
        <span class="font-small">手机 181****8858 已通过验证</span>
        <el-button type="danger" round size="small" plain class="right-button" @click="router.push('/personal/authentication_1')">验证手机</el-button>
      </div>
      <div v-if="phoneVe==0" class="left-box">
        <el-icon style="color: indianred" :size="20" class="icon"><CloseBold /></el-icon>
        <span class="title">手机验证</span>
        <span class="font-small">号码未验证 为了保护您账户和资产的安全，请验证您的手机号码。</span>
        <el-button type="danger" round size="small" plain class="right-button">修改手机</el-button>
      </div>
    </div>
    <!--邮箱验证-->
    <div class="box">
      <div v-if="emailVe==1" class="left-box">
        <el-icon :size="20" color="#0099d9" class="icon"><Select /></el-icon>
        <span class="title">邮箱验证</span>
        <span class="font-small">邮箱125****com 已通过验证</span>
        <el-button type="danger" round size="small" plain class="right-button">修改邮箱</el-button>
      </div>
      <div v-if="emailVe==0" class="left-box">
        <el-icon style="color: indianred" :size="20" class="icon"><CloseBold /></el-icon>
        <span class="title">邮箱验证</span>
        <span class="font-small">邮箱未设置 验证后可接收订单状态、出团通知书等变更提醒，保障您的账户安全。</span>
        <el-button type="danger" round size="small" plain class="right-button" @click="router.push('/personal/bindEmail')">绑定邮箱</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
a {
  text-decoration: none;
}
.font-small {
  color: #999;
  font-size: 12px;
}
.icon{
  vertical-align: middle
}
.title{
  margin-left: 20px;
  margin-right: 30px;
}
.box{
  border-bottom: 1px solid #f5f2f2;
  padding: 30px 25px;
  overflow: hidden;
}
.right-button{
  float: right;
  margin: 0 auto; /* 使用 margin 属性实现水平居中 */
}
.left-box{
  width: 100%;
}
</style>